{% extends "base.html" %}

{% block css %}
<link rel="stylesheet" href="/static/css/admin.css" />
{% endblock %}
{% block nav %}
   <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">

        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="/admin/">Googler Admin</a>
        <div class="nav-collapse">
          <ul class="nav">

            <li class="active"><a href="/admin/">Home</a></li>
            <li><a href="/admin/view_companies">Companies</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
{% block content %}
  <input type="hidden" name="org_key" value="{{ organization.key }}" />
  <legend>Adding yt playlists to this group</legend>
    <div class="control-group">
      <label for="input01" class="control-label">Youtube Username</label>
      <div class="controls">
        <input type="text" name="yt_username" id="yt_username" class="input-xlarge">
<button id="submit" class="btn btn-primary" type="button">Fetch Playlists</button>
      </div>
    </div>    

<form action="/admin/associate_ytplaylist" method="POST">
<input type="hidden" value="{{playlist_group_id}}" name="playlist_group_id" />
<input type="hidden" value="{{org_key}}" name="org_key" />

    <div class="form-actions">
     <button class="btn btn-primary" type="submit">Associate Playlists</button>
    </div>
<span id="sortable"></span>

</form>
{% endblock %}

{% block foot_js_lab %}
  .wait( function() {
    $("#submit").click(function() {
    // do loading image
    $.ajaxSetup({
      url: '/getjsonplaylist',
      type: "POST",
      dataType:'json',
      data: {'yt_username': $("#yt_username").val()}
    });
    
    $.getJSON('/admin/getjsonplaylist', function(data){
      var playlist_body = "";
      if (data == "") {
        playlist_body = "<h4>No playlist found for this username.</h4>";
      } else if (data == null){
        playlist_body = "<h4>No playlists found - please try again.</h4>";
      } else {
        $.each(data, function(index) {
          playlist_body += (data[index].title + 
          '<input id="selectedpid' + index + '" playlistTitle="' + data[index].title + '" name="pids" type="checkbox" value="' + data[index].playlistid + '_' + data[index].title + '" />');
        });     
      }

      $("#sortable").html(playlist_body);
    });
  });
  })
{% endblock %}
